﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script type="text/javascript" src="../jquery-1.6.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#tt2').tree({
                checkbox: true,
                url: 'tree_data.json',
                onClick: function (node) {
                    $(this).tree('toggle', node.target);
                    //alert('you dbclick '+node.text);
                },
                onContextMenu: function (e, node) {
                    e.preventDefault();
                    $('#tt2').tree('select', node.target);
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            });
        });
        function reload() {
            var node = $('#tt2').tree('getSelected');
            if (node) {
                $('#tt2').tree('reload', node.target);
            } else {
                $('#tt2').tree('reload');
            }
        }
        function getChildren() {
            var node = $('#tt2').tree('getSelected');
            if (node) {
                var children = $('#tt2').tree('getChildren', node.target);
            } else {
                var children = $('#tt2').tree('getChildren');
            }
            var s = '';
            for (var i = 0; i < children.length; i++) {
                s += children[i].text + ',';
            }
            alert(s);
        }
        function getChecked() {
            var nodes = $('#tt2').tree('getChecked');
            var s = '';
            for (var i = 0; i < nodes.length; i++) {
                if (s != '') s += ',';
                s += nodes[i].text;
            }
            alert(s);
        }
        function getSelected() {
            var node = $('#tt2').tree('getSelected');
            alert(node.text);
        }
        function collapse() {
            var node = $('#tt2').tree('getSelected');
            $('#tt2').tree('collapse', node.target);
        }
        function expand() {
            var node = $('#tt2').tree('getSelected');
            $('#tt2').tree('expand', node.target);
        }
        function collapseAll() {
            var node = $('#tt2').tree('getSelected');
            if (node) {
                $('#tt2').tree('collapseAll', node.target);
            } else {
                $('#tt2').tree('collapseAll');
            }
        }
        function expandAll() {
            var node = $('#tt2').tree('getSelected');
            if (node) {
                $('#tt2').tree('expandAll', node.target);
            } else {
                $('#tt2').tree('expandAll');
            }
        }
        function append() {
            var node = $('#tt2').tree('getSelected');
            $('#tt2').tree('append', {
                parent: (node ? node.target : null),
                data: [{
                    text: 'new1',
                    checked: true
                }, {
                    text: 'new2',
                    state: 'closed',
                    children: [{
                        text: 'subnew1'
                    }, {
                        text: 'subnew2'
                    }]
                }]
            });
        }
        function remove() {
            var node = $('#tt2').tree('getSelected');
            $('#tt2').tree('remove', node.target);
        }
        function update() {
            var node = $('#tt2').tree('getSelected');
            if (node) {
                node.text = '<span style="font-weight:bold">new text</span>';
                node.iconCls = 'icon-save';
                $('#tt2').tree('update', node);
            }
        }
        function isLeaf() {
            var node = $('#tt2').tree('getSelected');
            var b = $('#tt2').tree('isLeaf', node.target);
            alert(b)
        }
    </script>
</head>
<body>
    <h2>
        Tree</h2>
    <div class="demo-info" style="margin-bottom: 10px">
        <div class="demo-tip icon-tip">
        </div>
        <div>
            Click the node and drag it to other position.</div>
    </div>
    <p>
        Create from HTML markup</p>
    <ul id="tt1" class="easyui-tree" animate="true" dnd="true">
        <li><span>Folder</span>
            <ul>
                <li state="closed"><span>Sub Folder 1</span>
                    <ul>
                        <li><span><a href="#">File 11</a></span> </li>
                        <li><span>File 12</span> </li>
                        <li><span>File 13</span> </li>
                    </ul>
                </li>
                <li><span>File 2</span> </li>
                <li><span>File 3</span> </li>
                <li>File 4</li>
                <li>File 5</li>
            </ul>
        </li>
        <li><span>File21</span> </li>
    </ul>
    <hr></hr>
    <p>
        Create from JSON data</p>
    <div style="margin: 10px;">
        <a href="#" onclick="reload()">reload</a> <a href="#" onclick="getChildren()">getChildren</a>
        <a href="#" onclick="getChecked()">getChecked</a> <a href="#" onclick="getSelected()">
            getSelected</a> <a href="#" onclick="collapse()">collapse</a> <a href="#" onclick="expand()">
                expand</a> <a href="#" onclick="collapseAll()">collapseAll</a> <a href="#" onclick="expandAll()">
                    expandAll</a> <a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">
                        remove</a> <a href="#" onclick="update()">update</a> <a href="#" onclick="isLeaf()">
                            isLeaf</a>
    </div>
    <ul id="tt2">
    </ul>
    <div id="mm" class="easyui-menu" style="width: 120px;">
        <div onclick="append()" iconcls="icon-add">
            Append</div>
        <div onclick="remove()" iconcls="icon-remove">
            Remove</div>
        <div class="menu-sep">
        </div>
        <div onclick="expand()">
            Expand</div>
        <div onclick="collapse()">
            Collapse</div>
    </div>
</body>
</html>
